验证码的花式玩法

#验证码的花式玩法| 来源: 网络整理| 查看: 265

01 前言

滑动验证码的常见样式有很多种，下面我就使用KgCaptcha来就给大家举例说说！

02 嵌入式

这种样式最常见，也是默认样式，直接在页面上展现。

// 引入js kg.captcha({ // 绑定元素，验证框显示区域 bind: "#captchaBox", // 验证成功事务处理 success: function(e) { console.log(e); }, // 验证失败事务处理 failure: function(e) { console.log(e); }, // 点击刷新按钮时触发 refresh: function(e) { console.log(e); } }); 03 触发式

这种样式占用面积较小，通过hover悬浮在指定元素上展现。

// 引入js kg.captcha({ // 绑定显示区域 bind: "#captchaBox", // 向上或向下浮出，top|down float: "top", // 验证成功事务处理 success: function (e) { console.log(e); }, // 验证失败事务处理 failure: function (e) { console.log(e); }, // 点击刷新按钮时触发 refresh: function (e) { console.log(e); } }); 04 弹窗式

这种样式验证码默认不可见，通过点击或调用指定的方法后将以浮层的形式展现。

// 引入js kg.captcha({ // 绑定弹窗按钮 button: "#captchaButton", // 验证成功事务处理 success: function (e) { // 验证成功，直接提交表单 // form1.submit(); console.log(e); }, // 验证失败事务处理 failure: function (e) { console.log(e); }, // 点击刷新按钮时触发 refresh: function (e) { console.log(e); } }); 05 相关链接

官方地址：https://www.kgcaptcha.com/

在线体验：https://www.kgcaptcha.com/demo/

开发文档：https://www.kgcaptcha.com/article?pid=6

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章